<template>
  <view class="view" id="view">
    <!-- （前面是全部品种）搜索框 -->
    <view class="search-wrapper">
      <!--  搜索栏 -->
      <mSearch class="search" :noClear="clearSearch">
        <view class="all-kind" @click="handleShowSide('全部种类', lycheeKinds['count'])">全</view>
      </mSearch>
    </view>

    <view class="wrapper">
      <!-- 流水评论 -->
      <view class="water-comment">
        <view
          :id="'comment' + index"
          :animation="comment.animation"
          v-for="(comment, index) in visibleComment"
          :key="comment.date"
          class="comment-item"
          :style="
            'top:' +
            comment.top +
            'px' +
            ';background:linear-gradient(' +
            comment.color[0] +
            ',' +
            comment.color[1] +
            ',' +
            comment.color[2] +
            ',' +
            comment.color[3] +
            ');-webkit-background-clip: text;'
          "
          v-if="commentList.length > 0 || commentList != []"
        >
          <image :src="comment.avatar"></image>
          {{ comment.text }}
          <text>♥ {{ comment.likeCount }}</text>
        </view>

        <view class="no-comment" v-else>暂无弹幕评论哦！快去评论吧！</view>
      </view>

      <!-- 图片展示 -->

      <mSwiper :list="swiperList"></mSwiper>

      <!-- 初略信息展示 -->
      <view class="kind-small-info">
        <view class="kind-name" v-html="title"></view>
        <view class="intro" v-html="introCss"></view>
      </view>

      <!-- （点赞数）-》点击传送购买 -->
      <view class="buy">
        <view class="like">
          <view class="like-btn" @click="like.isLiked = !like.isLiked">
            <image :src="like.isLiked ? like.liked : like.noLiked"></image>
          </view>
          <view class="like-count">999</view>
        </view>

        <view class="buy-btn">前往购买</view>
      </view>

      <!-- 详细介绍 -->
      <view class="details-wrapper">
        <view v-html="content"></view>
      </view>

      <!-- 左边漂浮本页面的目录按钮 -->
      <!-- <view class="float-btn left-btn">录</view> -->

      <!-- 右边漂浮全部评论区按钮 -->
      <view class="float-btn right-btn" @click="handleShowSide('全部评论', commentList.length)">评</view>

      <view
        class="float-btn top-btn"
        :style="topScroll < 100 ? 'display:none' : 'display:flex'"
        @click="handleClickTop"
      >
        顶
      </view>

      <!-- 全部种类左侧边栏、全部评论 -->
      <mLeftSide :visible.sync="showLeftSide" :title="sideTitle" :count="sideItemCount">
        <view class="lychee-kind" v-if="sideTitle === '全部种类'">
          <view class="kind-part" v-for="(v, k) in lycheeKinds" v-if="k !== 'count'" :key="k">
            <view class="kind-title">{{ k === 'host' ? '市场流行' : k }}</view>

            <view class="kind-item-warpper">
              <view class="kind-item" v-for="vari in v" @click="handleClickKind(vari.id)" :key="vari.id">
                {{ vari.name }}
              </view>
            </view>
          </view>
        </view>
        <view class="comment-all" v-if="sideTitle === '全部评论'">
          <view class="comment-wrapper" v-for="comment in commentList" :key="comment.date">
            <image class="comment-aver" :src="comment.avatar"></image>
            <view class="comment-right">
              <view class="comment-user">{{ comment.username }}</view>

              <view class="comment-cont">
                <text>{{ comment.content }}</text>
              </view>

              <view class="comment-info" v-if="comment.goodsType != '' || comment.goodsType.length !== 0">
                <view>
                  已购
                  <text class="goods-type">
                    <text>桂味</text>
                    &nbsp; · &nbsp;
                    <text>净重10kg</text>
                  </text>
                </view>
              </view>

              <view class="comment-info">
                <view class="comment-time">{{ formatCommentDate(comment.date) }}</view>
                <view class="comment-like">♥ {{ comment.likeCount }}</view>
              </view>
            </view>
          </view>
        </view>
      </mLeftSide>

      <!-- 屏幕底部悬浮评论输入框（加评论提交按钮） -->
      <view class="bottom-comment-wrapper">
        <view class="bottom-comment">
          <input type="text" placeholder="请输入评论" class="input" />
          <view class="send-btn">发送</view>
        </view>
      </view>

      <!-- 全屏加载动画 -->
      <mLoadingMask v-if="showLoading"></mLoadingMask>
    </view>
  </view>
</template>

<script>
import { formatCommentDate } from '../../utils/formatDate'
import mSwiper from '@/components/mSwiper/index.vue'
import mSearch from '@/components/mSearch/index'
import mLeftSide from '@/components/mLeftSide/index'
import mLoadingMask from '@/components/mLoadingMask/index'

export default {
  components: {
    mSearch,
    mSwiper,
    mLeftSide,
    mLoadingMask
  },
  data() {
    return {
      randomColorList: [
        ['to left', 'rgb(128, 155, 228)', 'rgb(181, 226, 225)', 'rgb(110, 145, 140)'],
        ['to bottom', 'rgb(126, 180, 115)', 'rgb(175, 215, 118)', 'rgb(142, 118, 149)'],
        ['to bottom left', 'rgb(110, 156, 198)', 'rgb(184, 138, 183)', 'rgb(167, 118, 178)'],
        ['to right', 'rgb(204, 220, 116)', 'rgb(185, 211, 121)', 'rgb(134, 182, 134)'],
        ['to top left', 'rgb(132, 193, 243)', 'rgb(122, 164, 114)', 'rgb(156, 117, 140)'],
        ['to top right', 'rgb(110, 142, 199)', 'rgb(173, 144, 128)', 'rgb(140, 160, 182)'],
        ['to top', 'rgb(161, 212, 170)', 'rgb(162, 170, 154)', 'rgb(118, 206, 122)'],
        ['to bottom right', 'rgb(191, 147, 112)', 'rgb(183, 124, 169)', 'rgb(150, 195, 124)'],
        ['to left', 'rgb(145, 130, 202)', 'rgb(131, 115, 147)', 'rgb(182, 188, 158)'],
        ['to right', 'rgb(162, 174, 149)', 'rgb(144, 142, 133)', 'rgb(156, 185, 155)']
      ],

      commentList: [
        {
          avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
          content: '荔枝非常甜，口感好，推荐！放松放松十分士大夫首发式地方都是',
          date: '2025-01-19T18:25:34.00+08:00',
          goodsType: '荔枝',
          username: '用户230',

          likeCount: 124
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
          content: '这荔枝新鲜多汁，味道清爽，非常喜欢！',
          date: '2025-01-04T13:45:19.00+08:00',
          goodsType: '荔枝',
          username: '用户150',

          likeCount: 83
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
          content: '虽然外形不太完美，但味道还是挺好。',
          date: '2025-01-06T10:02:47.00+08:00',
          goodsType: '荔枝',
          username: '用户320',

          likeCount: 45
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
          content: '荔枝肉嫩多汁，味道浓郁，很喜欢！',
          date: '2025-01-11T14:50:10.00+08:00',
          goodsType: '荔枝',
          username: '用户547',

          likeCount: 132
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/5.jpg',
          content: '收到的荔枝很新鲜，味道很棒，回购！',
          date: '2025-01-01T16:33:22.00+08:00',
          goodsType: '荔枝',
          username: '用户689',

          likeCount: 97
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/6.jpg',
          content: '荔枝个头大，肉质鲜嫩，味道很甜。',
          date: '2025-01-15T11:11:05.00+08:00',
          goodsType: '荔枝',
          username: '用户845',

          likeCount: 205
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/7.jpg',
          content: '味道很一般，不是很甜，可能是季节问题。',
          date: '2025-01-18T17:12:03.00+08:00',
          goodsType: '荔枝',
          username: '用户981',

          likeCount: 30
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
          content: '第一次尝试荔枝，感觉不错，挺甜的。',
          date: '2025-01-20T09:08:47.00+08:00',
          goodsType: '荔枝',
          username: '用户470',

          likeCount: 57
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/9.jpg',
          content: '荔枝皮薄，肉厚，味道甘甜，吃了一大堆！',
          date: '2025-01-02T12:18:30.00+08:00',
          goodsType: '荔枝',
          username: '用户563',

          likeCount: 101
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/10.jpg',
          content: '味道很不错，不会很腻，适合喜欢清爽的人。',
          date: '2025-01-14T18:22:15.00+08:00',
          goodsType: '荔枝',
          username: '用户420',

          likeCount: 63
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/11.jpg',
          content: '新鲜的荔枝果肉多汁，口感不错。',
          date: '2025-01-01T08:17:55.00+08:00',
          goodsType: '荔枝',
          username: '用户238',

          likeCount: 78
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/12.jpg',
          content: '棒！。',
          date: '2025-01-15T15:43:42.00+08:00',
          goodsType: '荔枝',
          username: '用户567',

          likeCount: 112
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/13.jpg',
          content: '好吃',
          date: '2025-01-07T13:05:58.00+08:00',
          goodsType: '荔枝',
          username: '用户832',

          likeCount: 156
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/14.jpg',
          content: '这个季节的荔枝味道真好，回味无穷！',
          date: '2025-01-18T14:00:11.00+08:00',
          goodsType: '荔枝',
          username: '用户401',

          likeCount: 94
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/15.jpg',
          content: '刚刚从家里寄过来的，味道和外面的差别不大。',
          date: '2025-01-10T11:25:33.00+08:00',
          goodsType: '荔枝',
          username: '用户720',

          likeCount: 65
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/16.jpg',
          content: '荔枝非常新鲜，口感很好，很适合做夏季水果。',
          date: '2025-01-16T16:47:25.00+08:00',
          goodsType: '荔枝',
          username: '用户582',

          likeCount: 180
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/17.jpg',
          content: '荔枝甜度刚好，不会太腻，感觉很清爽。',
          date: '2025-01-19T19:13:57.00+08:00',
          goodsType: '荔枝',
          username: '用户695',

          likeCount: 142
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
          content: '荔枝的质量不错，色泽鲜艳，肉质软糯。',
          date: '2023-12-12T14:38:42.00+08:00',
          goodsType: '荔枝',
          username: '用户401',

          likeCount: 125
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
          content: '好吃，甜蜜可口，吃起来很有满足感。',
          date: '2023-12-05T08:30:40.00+08:00',
          goodsType: '荔枝',
          username: '用户674',

          likeCount: 90
        },
        {
          avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
          content: '荔枝是比较好吃的，果肉也很饱满。',
          date: '2023-12-14T12:23:01.00+08:00',
          goodsType: '荔枝',
          username: '用户836',

          likeCount: 75
        }
      ],
      titleCss: `<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="139942" data-width="100%" style="width: 100%; flex: 0 0 100%; margin-left: auto; margin-right: auto;max-width:100% !important;box-sizing:border-box;">
	<section style="margin: 10px auto; display: flex; justify-content: center;" class="">
		<section style="display: flex;">
			<section style="flex-shrink: 0;display: flex;align-items: flex-start;margin-top: -5px;margin-right: -20px;">
				<section class="assistant" style="width: 30px;box-sizing:border-box;">
					<img class="assistant" style="width: 100%; display: block;vertical-align:baseline;box-sizing:border-box;max-width:100% !important;" src="https://bcn.135editor.com/files/images/editor_styles/f94fc8add7c255324f81545a032265e1.gif" data-width="100%" draggable="false" data-ratio="1" data-w="155"/>
				</section>
			</section>
			<section style="display: flex;align-items: flex-end;" class="">
				<section>
					<section style="padding: 0 25px;box-sizing:border-box;">
						<section style="font-size: 25px; color: rgb(74, 155, 91); text-align: center; line-height: 1.75em;">
							<span style="font-size: 25px;"><strong>{$title$}</strong></span>
						</section>
					</section>
					<section style="width: 100%;height: 4px;background-color: #bed861;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
				</section>
				<section style="flex-shrink: 0;margin-left: -20px;">
					<section class="assistant" style="width: 40px;box-sizing:border-box;">
						<img class="assistant" style="width: 100%; display: block;vertical-align:baseline;box-sizing:border-box;max-width:100% !important;" src="https://bcn.135editor.com/files/images/editor_styles/3b035c44b13ded47a5d1bba4feb90c0d.gif" data-width="100%" draggable="false" data-ratio="1.096676737160121" data-w="331"/>
					</section>
				</section>
			</section>
		</section>
	</section>
</section>
<section class="_135editor" data-role="paragraph">
	<p >
		<br/>
	</p>
</section>`,
      title: '',
      introCss: '',
      content: '',
      swiperList: [],
      // 弹幕纵向坐标map
      visibleComment: [],
      commentCount: 20, // 设定最大评论数量
      currentCount: 0, // 当前循环计数
      maxVisibleComments: 40,
      wordsDelay: 800, // 每个字800毫秒

      like: {
        isLiked: false,
        liked: '../../static/liked.svg',
        noLiked: '../../static/like.svg'
      },
      styles: {
        color: '#2979FF',
        borderColor: '#2979FF'
      },
      fullWidth: 0,
      topScroll: 0,
      showLeftSide: false,
      sideTitle: '',
      sideItemCount: 0,
      lycheeKinds: {},

      showLoading: false,
      timer: null,
      waterTimes: 0,
      // 储存上一个评论延时,最后一个是第一个到第二个的延时时间,和最后一个的运行时间
      delay: [0, 0, 0, 0, 0, 0],
      fullWidth: 0,
      clearSearch: '',
      formatCommentDate
    }
  },
  created() {
    this.makeComment()
    // const lychee = [
    //   { variety: '妃子笑', origin: ['广东', '广西', '海南'], host: true },
    //   { variety: '黑叶', origin: ['海南', '广东', '四川'], host: true },
    //   { variety: '白糖罂', origin: ['广东', '海南', '云南', '四川', '福建'], host: true },
    //   { variety: '怀枝', origin: ['广东', '广西'], host: true },
    //   { variety: '桂味', origin: ['广东', '广西', '云南', '四川'], host: true },
    //   { variety: '糯米糍', origin: ['广东', '广西', '福建'], host: true },
    //   { variety: '双肩玉荷包', origin: ['广东'], host: false },
    //   { variety: '灵山香荔', origin: ['广西'], host: false },
    //   { variety: '兰竹', origin: ['福建'], host: false },
    //   { variety: '三月红', origin: ['广西', '广东'], host: false },
    //   { variety: '海南无核', origin: ['海南'], host: false },
    //   { variety: '白腊荔枝', origin: ['广东'], host: false },
    //   { variety: '仙进奉', origin: ['广东'], host: true },
    //   { variety: '挂绿', origin: ['广东'], host: true },
    //   { variety: '鹅蛋荔', origin: ['海南'], host: false },
    //   { variety: '冰荔', origin: ['广东'], host: true },
    //   { variety: '鸡嘴荔', origin: ['广西'], host: false },
    //   { variety: '元红', origin: ['福建'], host: false },
    //   { variety: '水晶球', origin: ['广东'], host: false },
    //   { variety: '乌叶', origin: ['福建'], host: false },
    //   { variety: '陈紫', origin: ['福建'], host: false },
    //   { variety: '大红袍', origin: ['四川'], host: false },
    //   { variety: '绛沙兰', origin: ['四川'], host: false },
    //   { variety: '带绿', origin: ['四川'], host: false },
    //   { variety: '贵妃红', origin: ['广东', '广西'], host: false },
    //   { variety: '并岗红糯', origin: ['广东', '广西'], host: false },
    //   { variety: '红绣球', origin: ['广东', '广西', '四川'], host: false },
    //   { variety: '燎原荔', origin: ['广东', '广西'], host: false },
    //   { variety: '马贵荔', origin: ['广东', '广西'], host: false }
    // ]
    // this.sortLycheeList(lychee)
  },
  onLoad() {
    this.getEnjoySmallList()
  },
  onShow() {
    this.clearSearch = false // 先设为 false，触发搜索框清空
    this.$nextTick(() => {
      this.clearSearch = true // 立即再设回 true，防止影响下一次输入
    })
    // console.log('页面显示，搜索框内容已清空')
    // 评论流水动画
    this.moveComment()
    // 延时让内容加载完成后才执行
    this.timer = setTimeout(() => {
      clearTimeout(this.timer)
      this.moveComment()
    }, 1000)
  },
  onHide() {
    this.clearSearch = false // 先设为 false，触发搜索框清空
    this.$nextTick(() => {
      this.clearSearch = true // 立即再设回 true，防止影响下一次输入
    })
    // console.log('页面显示，搜索框内容已清空')
    clearTimeout(this.timer)
  },
  watch: {
    commentList(n, o) {
      this.visibleComment = []
      this.waterTimes = 0
      this.makeComment()
      setTimeout(() => {
        this.moveComment()
      }, 500)
    }
  },
  methods: {
    async getEnjoySmallList() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getEnjoySmallList'
      })
      if (res.status !== 200) {
        uni.showToast({
          icon: 'none',
          title: '服务器存出错'
        })
        return
      }

      // 默认id
      this.currId = res.data[0].id
      this.sortLycheeList(res.data)
      this.getEnjoyInfo()

      // console.log(res)
    },

    async getEnjoyInfo() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getEnjoyById/' + this.currId
      })
      if (res.status !== 200) {
        uni.showToast({
          icon: 'none',
          title: '服务器存出错'
        })
        return
      }

      // console.log(res)
      const enjoy = res.data

      this.swiperList = enjoy.swiper_list

      this.content = enjoy.content
      this.introCss = enjoy.description
      this.addTitle(enjoy.name)
    },

    addTitle(title) {
      const l = this.titleCss.split('{$')[0]
      const r = this.titleCss.split('$}')[1]

      this.title = l + title + r
    },

    moveComment() {
      const commentView = uni.createSelectorQuery().in(this)
      this.delay = [0, 0, 0, 0, 0, 0]

      this.visibleComment.forEach((comment, index) => {
        // console.log(index, comment)
        const wordLeng = comment.text.length
        const delayIndex = index % 5
        const duration = wordLeng < 10 ? 10000 : wordLeng * this.wordsDelay
        const delay = this.delay[delayIndex]

        const animation = uni.createAnimation({
          duration: duration, // 动画持续时间，单位为毫秒
          timingFunction: 'linear',
          delay: delay // 每条评论的延迟时间，单位为毫秒
        })
        if (index === 0) this.delay[this.delay.length - 1] = duration - duration / 1.8
        if (index === this.visibleComment.length - 1) {
          this.delay[this.delay.length - 1] += duration + delay
        }
        this.delay[delayIndex] = duration / 1.8 + delay

        commentView
          .select('#comment' + index)
          .boundingClientRect((data2) => {
            animation.translateX(-this.fullWidth * 2 - data2.width - Math.random()).step() // 从屏幕外滑动到屏幕另一侧
            animation.translateX(0).step({
              duration: 0,
              delay: 0
            })
            // 只有这方法能够批量启动动画
            this.$set(comment, 'animation', animation.export())
          })
          .exec()
      })

      // 这里必须使用递归，因为你需要确定这个函数运行完才能继续执行，否则会出现动画重复而动画不动
      // 防止占用内存较大，限制流水次数
      if (this.waterTimes <= 200) {
        this.timer = setTimeout(() => {
          clearTimeout(this.timer)
          this.waterTimes++
          this.moveComment()
        }, this.delay[this.delay.length - 1])
      }
    },
    sortLycheeList(list) {
      let map = new Map()
      list.forEach((item) => {
        if (!map.get('host')) {
          map.set('host', [])
        }

        if (item.is_host) {
          let li = map.get('host')
          li.push(item)
          map.set('host', li)
        }

        const places = JSON.parse(item.places)
        places.forEach((origin) => {
          if (!map.get(origin)) {
            map.set(origin, [])
          }
          let li2 = map.get(origin)
          li2.push(item)
          map.set(origin, li2)
        })
      })

      this.lycheeKinds = Object.fromEntries(map)
      this.lycheeKinds['count'] = list.length
    },

    handleShowSide(type, count) {
      // console.log('显示')
      this.showLeftSide = true
      this.sideTitle = type
      this.sideItemCount = count
    },
    handleClickTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    },
    getRandomColor() {
      const index = Math.floor(Math.random() * this.randomColorList.length)
      return this.randomColorList[index]
    },

    getRandomSignedNumber(min, max, fmin, fmax) {
      // 生成一个 [min, max] 范围内的随机数
      const randomValue = Math.random() * (max - min) + min
      const frandomValue = Math.random() * (fmax - fmin) + fmin

      // 随机决定符号，Math.random() < 0.5 则为负数
      const sign = Math.random() < 0.5 ? -1 : 1

      // 返回带符号的随机数
      return randomValue * sign > 0 ? randomValue : frandomValue
    },

    // 制作弹幕list
    makeComment() {
      const leng = this.commentList.length

      for (let index = 0; index < (leng > this.commentCount ? this.commentCount : leng); index++) {
        let comment = this.commentList[index]
        // 余数分5组
        const yu = index % 5
        let top = yu * 50

        const query = uni.createSelectorQuery().in(this)
        query
          .select('#view')
          .boundingClientRect((data) => {
            const fullWidth = data.width
            this.fullWidth = fullWidth

            top = (top * fullWidth) / 750
            let color = this.getRandomColor()
            this.visibleComment.push({
              avatar: comment.avatar,
              text: comment.content,
              likeCount: comment.likeCount,
              top: top,
              color: color,
              animation: {}
            })
          })
          .exec()
      }
    },

    // 点击种类
    handleClickKind(id) {
      // console.log(id)
      // 获取种类信息
      // 显示全屏加载动画
      // console.log('全屏白色动画')

      this.showLoading = true

      setTimeout(() => {
        // 模拟修改评论

        this.currId = id
        this.getEnjoyInfo()

        this.commentList = [
          {
            avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
            content: '发生发生厮打',
            date: '2025-01-19T18:25:34.00+08:00',
            goodsType: '荔枝',
            username: '用户230',

            likeCount: 124
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
            content: '放松放松的撒旦法发',
            date: '2025-01-04T13:45:19.00+08:00',
            goodsType: '荔枝',
            username: '用户150',

            likeCount: 83
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
            content: '的说法发生发生大',
            date: '2025-01-06T10:02:47.00+08:00',
            goodsType: '荔枝',
            username: '用户320',

            likeCount: 45
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
            content: 'dasdsad！',
            date: '2025-01-11T14:50:10.00+08:00',
            goodsType: '荔枝',
            username: '用户547',

            likeCount: 132
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/5.jpg',
            content: 'rgsdgsgsgesgeaffwrwrewR',
            date: '2025-01-01T16:33:22.00+08:00',
            goodsType: '荔枝',
            username: '用户689',

            likeCount: 97
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/6.jpg',
            content: 'grthrhv打发士大夫首发式发生方法',
            date: '2025-01-15T11:11:05.00+08:00',
            goodsType: '荔枝',
            username: '用户845',

            likeCount: 205
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/7.jpg',
            content: '放入肉汤好热好热好热好热',
            date: '2025-01-18T17:12:03.00+08:00',
            goodsType: '荔枝',
            username: '用户981',

            likeCount: 30
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
            content: '还有他还有他和人家二',
            date: '2025-01-20T09:08:47.00+08:00',
            goodsType: '荔枝',
            username: '用户470',

            likeCount: 57
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/9.jpg',
            content: '绘图软件还有他教育教育他',
            date: '2025-01-02T12:18:30.00+08:00',
            goodsType: '荔枝',
            username: '用户563',

            likeCount: 101
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/10.jpg',
            content: '花一天今天人今天有人',
            date: '2025-01-14T18:22:15.00+08:00',
            goodsType: '荔枝',
            username: '用户420',

            likeCount: 63
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/11.jpg',
            content: '吉野家二级页',
            date: '2025-01-01T08:17:55.00+08:00',
            goodsType: '荔枝',
            username: '用户238',

            likeCount: 78
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/12.jpg',
            content: '棒！。',
            date: '2025-01-15T15:43:42.00+08:00',
            goodsType: '荔枝',
            username: '用户567',

            likeCount: 112
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/13.jpg',
            content: '好吃',
            date: '2025-01-07T13:05:58.00+08:00',
            goodsType: '荔枝',
            username: '用户832',

            likeCount: 156
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/14.jpg',
            content: '还有它具有苦呀苦呀苦呀苦呀苦呀看看看看和胡同一号月台和',
            date: '2025-01-18T14:00:11.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 94
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/15.jpg',
            content: '教育研究院加入鸡汤馄饨',
            date: '2025-01-10T11:25:33.00+08:00',
            goodsType: '荔枝',
            username: '用户720',

            likeCount: 65
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/16.jpg',
            content: '基于苦于烤鱼烤鱼苦于烤鱼烤鱼烤鱼。',
            date: '2025-01-16T16:47:25.00+08:00',
            goodsType: '荔枝',
            username: '用户582',

            likeCount: 180
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/17.jpg',
            content: '具有哭一哭与苦于烤鱼烤鱼苦于烤鱼烤鱼',
            date: '2025-01-19T19:13:57.00+08:00',
            goodsType: '荔枝',
            username: '用户695',

            likeCount: 142
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/18.jpg',
            content: '就推荐推荐推荐推荐',
            date: '2023-12-12T14:38:42.00+08:00',
            goodsType: '荔枝',
            username: '用户401',

            likeCount: 125
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/19.jpg',
            content: '已经添加添加一条今天有人。',
            date: '2023-12-05T08:30:40.00+08:00',
            goodsType: '荔枝',
            username: '用户674',

            likeCount: 90
          },
          {
            avatar: 'https://randomuser.me/api/portraits/men/20.jpg',
            content: '荔今天已经投入今天今天已经同意给予推荐',
            date: '2023-12-14T12:23:01.00+08:00',
            goodsType: '荔枝',
            username: '用户836',

            likeCount: 75
          }
        ]

        this.showLoading = false
        this.showLeftSide = false
      }, 1000)

      // 等待完全加载完毕，解除等待，并隐藏菜单
    }
  },
  // 监听页面滚动
  onPageScroll(e) {
    // 页面滚动触发事件的处理函数
    //console.log(e.scrollTop) // 输出滚动位置的垂直距离
    this.topScroll = e.scrollTop
  }
}
</script>

<style lang="scss" scoped>
.search-wrapper {
  display: flex;

  .all-kind {
    width: 80upx;
    height: 60upx;
    border-radius: 10upx;
    background-color: #fff;
    margin-left: 20upx;
    box-shadow: $def-shadow;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $uni-text-color-grey;
    cursor: pointer;
  }

  .search {
    width: 100%;
    height: inherit;
  }
}

.wrapper {
  width: 100%;
  background-color: #fff;
}

.water-comment {
  width: 100%;
  height: 250upx;
  background-color: #fff;
  padding: 10upx 0;
  // overflow: hidden;
  pointer-events: none; /* 让弹幕层不阻止用户操作 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-comment {
    font-size: 30upx;
    color: #bfbfbf;
  }
}

.comment-item {
  position: absolute;
  white-space: nowrap;
  color: black;
  font-size: 35upx;
  font-weight: bold;
  left: 750upx;
  //background: linear-gradient(to right, red, yellow, green);

  color: transparent; /* 使字体本身透明，背景色会通过 clip 显现 */
  //animation-duration: 10s;
  //animation-name: move;
  //animation-timing-function: linear;
  z-index: 10;

  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 40upx;
    height: 40upx;
    border-radius: 50%;
    margin-right: 10upx;
  }
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1500upx);
  }
}

// 750/400 = 16:9比例
.swiper {
  width: 750upx;
  height: 421upx;

  .swiper-item {
    width: 100%;
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

.kind-small-info {
  padding: 10upx 30upx;
  .kind-name {
    text-align: center;
    font-size: 50upx;
    margin: 10upx 0;
  }
  .intro {
    text-indent: 50upx;
  }
}

.buy {
  width: 100%;
  // height: 80upx;?
  padding: 10upx;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;

  .like {
    width: 80upx;
    height: 80upx;
    margin-right: 20upx;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    border-radius: 50%;
    // box-shadow: $def-shadow;

    .like-btn {
      width: 40upx;
      height: 40upx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .like-count {
      text-align: center;
      font-size: 23upx;
      color: #bfbfbf;
    }
  }

  .buy-btn {
    width: 250upx;
    height: 80upx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40upx;
    color: #fff;
    box-shadow: $def-shadow;
    background: $def-submit-bg;
  }
}

.details-wrapper {
  width: 100%;
  padding: $def-padding;
  box-sizing: border-box;
}

.float-btn {
  position: fixed;
  width: 80upx;
  height: 80upx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px rgba($color: #d8d8d8, $alpha: 0.8);
  border-radius: 50%;
  opacity: 0.6;
}

.left-btn {
  top: 400upx;
  left: 20upx;
}

.right-btn {
  top: 700upx;
  right: 20upx;
}

.top-btn {
  top: 830upx;
  right: 20upx;
}

.bottom-comment-wrapper {
  width: 100%;
  height: 100upx;

  .bottom-comment {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 100upx;
    z-index: 999;
    background-color: #fff;
    box-shadow: $def-shadow;
    padding: 20upx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .input {
      height: 100%;
      width: 550upx;
      padding: 0 10upx;
      background-color: #f8f8f8;
      font-size: 30upx;
    }

    .send-btn {
      width: 120upx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 35upx;
      border-radius: 10upx;
      background-color: $uni-color-primary;
      color: #fff;
      height: 100%;
    }
  }
}

.comment-wrapper {
  display: flex;
  margin-top: 37upx;
  justify-content: space-between;
  .comment-aver {
    width: 75upx;
    height: 75upx;
    border-radius: 50%;
  }
  .comment-right {
    flex: 4;
    padding: 5upx;
    padding-left: 15upx;
    padding-top: 3upx;
    box-sizing: border-box;
    font-size: 30upx;
    letter-spacing: 3upx;

    display: inline-block;

    .comment-cont {
      margin-top: 10upx;
      font-size: 33upx;

      .image-list {
        margin-top: 15upx;
        display: grid;
        gap: 10upx;
        grid-template-columns: 1fr 1fr 1fr;

        image {
          width: 140upx;
          height: 140upx;
        }
      }
    }

    .comment-info {
      display: flex;
      margin-top: 15upx;
      justify-content: space-between;

      .goods-type {
        margin-left: 10upx;
      }
    }

    .comment-user,
    .comment-info {
      color: #bfbfbf;
    }
  }
}

.kind-part {
  .kind-title {
    font-size: 35upx;
    margin: 20upx 0;
  }

  .kind-item-warpper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10upx;

    .kind-item {
      justify-content: center;
      align-items: center;
      padding: 15upx 5upx;
      background-color: rgba($color: #d8d8d8, $alpha: 0.4);
      font-size: 30upx;
      display: inline-flex;
      border-radius: 2upx;
    }
  }
}
</style>
